<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<th:block th:fragment="post_item">
    <li th:class="'joe_list__item default ' + ${htmlType == 'index' ? 'animated wow' : ''} + ${htmlType == 'index' ? ' data-wow-delay=&quot;0.' + iteration.index + 's&quot;' : ''}" th:style="'animation-delay: '+${'0.'+iteration.index}+'s;'">    <th:block th:if="${theme.config.home.enable_post_thumbnail}">
    <a th:href="${post.status.permalink}" class="thumbnail" th:title="${post.spec.title}" target="_blank" rel="noopener noreferrer">
        <th:block th:with="postCover = ${#lists.isEmpty(theme.config.home.post_thumbnail)? theme.config.basic.random_img_api_url+'?pageid='+post.metadata.name : theme.config.home.post_thumbnail}">
        <img width="100%" height="100%" class="lazyload" th:data-src="${post.spec.cover ?: postCover}" th:src="${theme.config.home.lazyload_thumbnail}"  th:alt="${post.spec.title}">
        </th:block>
        <time th:datetime="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">[[${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}]]</time>
        <i class="joe-font joe-icon-picture"></i>
    </a>
    </th:block>
<div class="information">
    <a th:href="${post.status.permalink}" class="title" th:title="${post.spec.title}" target="_blank" rel="noopener noreferrer">
        <th:block th:if="${post.spec.pinned}">
            <span class="badge" style="display: inline-block">置顶</span>
        </th:block>
        [[${post.spec.title}]]
    </a>
    <a class="abstract" th:href="${post.status.permalink}" th:title="${post.spec.title}" target="_blank" rel="noopener noreferrer">[[${post.status.excerpt}]]</a>
    <div class="meta">
        <ul class="items">
            <li>[[${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}]]</li>
            <li><i class="joe-font joe-icon-eye"></i>[[${post.stats.visit}]]</li>
            <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
            <li><i class="joe-font joe-icon-message"></i>[[${post.stats.comment}]]</li>
            </th:block>
            <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
                <li><i class="joe-font joe-icon-message"></i><span class="waline-comment-count" th:data-path="${post.status.permalink}">0</span></li>
                <script type="module" th:inline="javascript">
                    import { commentCount } from 'https://unpkg.com/@waline/client@v2/dist/comment.mjs';

                    commentCount({
                        serverURL: /*[[${theme.config.basic.waline_serverURL}]]*/'',
                        path:/*[[${post.status.permalink}]]*/'' ,

                        // 可选的，用于自定选择器，默认为 `'.waline-pageview-count'`
                        // selector: '.waline-pageview-count',
                    });
                </script>

            </th:block>
            <li><i class="joe-font joe-icon-dianzan"></i>[[${post.stats.upvote}]]</li>
        </ul>
        <th:block th:if="${not #lists.isEmpty(post.categories)}">
            <ul class="categories">
                <li class="pcate" th:each="category : ${post.categories}">
                    <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path d="M512.2 564.743a76.818 76.818 0 0 1-30.973-6.508L108.224 393.877c-26.105-11.508-42.56-35.755-42.927-63.272-.384-27.44 15.356-52.053 41.042-64.232l373.004-176.74c20.591-9.737 45.16-9.755 65.75.017L917.68 266.39c25.668 12.188 41.39 36.792 41.024 64.231-.384 27.5-16.821 51.73-42.908 63.237l-372.57 164.377a77.18 77.18 0 0 1-31.025 6.508zM139.843 329.592l370.213 163.241c1.291.56 3.018.567 4.345-.009l369.758-163.128-369.706-175.464v-.01c-1.326-.628-3.158-.636-4.502 0l-370.108 175.37zm748.015 1.858h.175-.175zM512.376 941.674c-10.348 0-20.8-2.32-30.537-6.997L121.05 778.624c-18.113-7.834-26.454-28.87-18.62-46.983 7.835-18.112 28.862-26.488 46.993-18.61l362.08 156.629 345.26-156.366c17.939-8.166 39.14-.253 47.324 17.746 8.166 17.964.227 39.157-17.729 47.324l-344.51 156.61c-9.196 4.449-19.281 6.7-29.471 6.7z" fill="var(--minor)"></path><path d="M871.563 515.449L511.81 671.775 152.358 515.787v73.578a34.248 34.248 0 0 0 20.76 31.48l301.518 129.19c11.806 5.703 24.499 8.546 37.175 8.546s25.367-2.843 37.174-8.546L850.82 620.534a34.248 34.248 0 0 0 20.744-31.474V515.45z" fill="#ff6a18"></path></svg>
                    <a class="link" target="_blank" rel="noopener noreferrer" th:href="@{${category.status.permalink}}">[[${category.spec.displayName}]]</a>
                </li>
            </ul>
        </th:block>
    </div>
</div>
</li>
</th:block>
</html>